<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1_固定定位广告条</title>
    <style>
        .top{
            background-color: #5AA4AE;
            height: 120PX;
            color: #fff;
            font-size: 30px;
            /*使用固定定位*/
            position: fixed;
            top: 0;
            /*设置宽度为视口宽度的100%*/
            width: 100vw;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #fff799;
            left: 20px;
        }
        .right{
            background-color: #f35336;
            right: 20px;
        }
        .main{
            margin-top: 130px;
        }
    </style>
</head>
<body>
<div class="top">
    我是顶部广告条
</div>
<div class="left">
    我是左侧广告条
</div>
<div class="right">
    我是右侧广告条
</div>
<div class="main">
<!--    生成假文-->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci aliquam amet at atque autem, consequatur debitis dicta dignissimos, eaque eius eligendi enim eos est et fugiat harum hic id illum impedit incidunt iure laboriosam laudantium molestiae nam nesciunt nobis non numquam obcaecati odio officiis pariatur perferendis placeat provident quae quam quibusdam quis quisquam quo quos</p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci aliquam amet at atque autem, consequatur debitis dicta dignissimos, eaque eius eligendi enim eos est et fugiat harum hic id illum impedit incidunt iure laboriosam laudantium molestiae nam nesciunt nobis non numquam obcaecati odio officiis pariatur perferendis placeat provident quae quam quibusdam quis quisqu
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci aliquam amet at atque autem, consequatur debitis dicta dignissimos, eaque eius eligendi enim eos est et fugiat harum hic id illum impedit incidunt iure laboriosam laudantium molestiae nam nesciunt nobis non numquam obcaecati odio officiis pariatur perferendis placeat provident quae quam quibusdam quis quisquam quo quos</p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci aliquam amet at atque autem, consequatur debitis dicta dignissimos, eaque eius eligendi enim eos est et fugiat harum hic id illum impedit incidunt iure laboriosam laudantium molestiae nam nesciunt nobis non numquam obcaecati odio officiis pariatur perferendis placeat provident quae quam quibusdam quis quisqu
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci aliquam amet at atque autem, consequatur debitis dicta dignissimos, eaque eius eligendi enim eos est et fugiat harum hic id illum impedit incidunt iure laboriosam laudantium molestiae nam nesciunt nobis non numquam obcaecati odio officiis pariatur perferendis placeat provident quae quam quibusdam quis quisquam quo quos</p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci aliquam amet at atque autem, consequatur debitis dicta dignissimos, eaque eius eligendi enim eos est et fugiat harum hic id illum impedit incidunt iure laboriosam laudantium molestiae nam nesciunt nobis non numquam obcaecati odio officiis pariatur perferendis placeat provident quae quam quibusdam quis quisqu
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci aliquam amet at atque autem, consequatur debitis dicta dignissimos, eaque eius eligendi enim eos est et fugiat harum hic id illum impedit incidunt iure laboriosam laudantium molestiae nam nesciunt nobis non numquam obcaecati odio officiis pariatur perferendis placeat provident quae quam quibusdam quis quisquam quo quos</p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci aliquam amet at atque autem, consequatur debitis dicta dignissimos, eaque eius eligendi enim eos est et fugiat harum hic id illum impedit incidunt iure laboriosam laudantium molestiae nam nesciunt nobis non numquam obcaecati odio officiis pariatur perferendis placeat provident quae quam quibusdam quis quisqu
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci aliquam amet at atque autem, consequatur debitis dicta dignissimos, eaque eius eligendi enim eos est et fugiat harum hic id illum impedit incidunt iure laboriosam laudantium molestiae nam nesciunt nobis non numquam obcaecati odio officiis pariatur perferendis placeat provident quae quam quibusdam quis quisquam quo quos</p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci aliquam amet at atque autem, consequatur debitis dicta dignissimos, eaque eius eligendi enim eos est et fugiat harum hic id illum impedit incidunt iure laboriosam laudantium molestiae nam nesciunt nobis non numquam obcaecati odio officiis pariatur perferendis placeat provident quae quam quibusdam quis quisqu
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci aliquam amet at atque autem, consequatur debitis dicta dignissimos, eaque eius eligendi enim eos est et fugiat harum hic id illum impedit incidunt iure laboriosam laudantium molestiae nam nesciunt nobis non numquam obcaecati odio officiis pariatur perferendis placeat provident quae quam quibusdam quis quisquam quo quos</p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci aliquam amet at atque autem, consequatur debitis dicta dignissimos, eaque eius eligendi enim eos est et fugiat harum hic id illum impedit incidunt iure laboriosam laudantium molestiae nam nesciunt nobis non numquam obcaecati odio officiis pariatur perferendis placeat provident quae quam quibusdam quis quisqu
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci aliquam amet at atque autem, consequatur debitis dicta dignissimos, eaque eius eligendi enim eos est et fugiat harum hic id illum impedit incidunt iure laboriosam laudantium molestiae nam nesciunt nobis non numquam obcaecati odio officiis pariatur perferendis placeat provident quae quam quibusdam quis quisquam quo quos</p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci aliquam amet at atque autem, consequatur debitis dicta dignissimos, eaque eius eligendi enim eos est et fugiat harum hic id illum impedit incidunt iure laboriosam laudantium molestiae nam nesciunt nobis non numquam obcaecati odio officiis pariatur perferendis placeat provident quae quam quibusdam quis quisqu
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci aliquam amet at atque autem, consequatur debitis dicta dignissimos, eaque eius eligendi enim eos est et fugiat harum hic id illum impedit incidunt iure laboriosam laudantium molestiae nam nesciunt nobis non numquam obcaecati odio officiis pariatur perferendis placeat provident quae quam quibusdam quis quisquam quo quos</p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci aliquam amet at atque autem, consequatur debitis dicta dignissimos, eaque eius eligendi enim eos est et fugiat harum hic id illum impedit incidunt iure laboriosam laudantium molestiae nam nesciunt nobis non numquam obcaecati odio officiis pariatur perferendis placeat provident quae quam quibusdam quis quisqu


</div>

</body>
</html>